<template>
  <view class="resolve">
    <uni-nav-bar title="" leftIcon="icon-fanhui" rightIcon="true" @clickLeft="$back()">
    </uni-nav-bar>
    <view v-if="wrongList.length>0">
    <scroll-view scroll-y class="scrollheight">
    <view class="question" @touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend">
      <view class="stem">
        {{wrongList[current].topicTypeName}}
      </view>
       <viewTopic v-if="wrongList.length>0" :topicObj="wrongList[current]" describe='错题集'></viewTopic>
      </view>
   </scroll-view>

    <view class="footer u-f-jsb u-f-ac">
      <view class=""  @click="showBottomMask">
        <span class="iconfont icon-lunwentimu"></span>
        <text>(<span class="blue">{{current+1}}</span>/{{total}})</text>
      </view>
      <view class="u-f">
        <view class="prev btn" v-if="(current+1)>1" @click="toPrev">
          上一题
        </view>
        <view class="btn" v-if="(current+1)<total" @click="toNext">
          下一题
        </view>
      </view>

    </view>
    <view class="fixed" @click="showRightMask">题目解析
      <span class="iconfont icon-youshuangjiantou"></span>
    </view>
    <sliderBottom :current.sync="current" :total="wrongList.length" :show.sync="isBottomMask"></sliderBottom>
    <sliderRight  :detail='{videoUrl:wrongList[current].videoUrl,answerAnalysis:wrongList[current].answerAnalysis,knowList:wrongList[current].knowledgePoint}' :show.sync="isRightMask"></sliderRight>
    </view>
    <view class="" v-else>
      <no-thing></no-thing>
    </view>
    <loading v-if="isloading"></loading>
  </view>
</template>

<script>
  import sliderRight from '@/components/sliderRight.vue'
  import sliderBottom from '@/components/sliderBottom.vue'
  import viewTopic from '@/components/view-topic/view-topic.vue'
       import noThing from "@/components/comm/no-thing.vue"
  import {
    mapState,mapActions
  } from 'vuex'
  export default {
    computed: { ...mapState(['userInfo'])
    },
    components: {
      sliderRight,
      sliderBottom,
      viewTopic,
      noThing
    },
    data() {
      return {
        // 显示右边侧栏题目解析
        isRightMask: false,
        //显示底部侧栏选项
        isBottomMask:false,
        flag: 0,
        lastX: 0,
        lastY: 0,
        current: 0,
        total: 0,
        wrongList:[],
        isloading:true
      };
    },
    onLoad(option) {
      this.examPaperId=option.id
      this.getExamWrongTopic()
    },
    methods: {
      // 获取错误题目
     async getExamWrongTopic(){
       // console.log({disciplineId:this.disciplineId,studentId:this.userInfo.id})
       let result=await this.$http.get('/examPaper/wrongs',{params:{examPaperId:this.examPaperId,studentId:this.userInfo.id}})
       this.wrongList=result.data
       this.total=this.wrongList.length
       this.isloading=false
      },
      // 点击显示底部选项遮罩层
      showBottomMask(){
        this.isBottomMask=!this.isBottomMask
      },
      // 点击显示题目解析遮罩层
      showRightMask() {
        this.isRightMask = true
      },
      // 上一题
      toPrev() {
        if ((this.current+1) <= 1) {
          return false;
        }
        this.current--;
      },
      // 下一题
      toNext() {
        if ((this.current+1) >= this.total) {
          return false;
        }
        this.current++;
      },
      // 上下滑动/左右滑动
      handletouchmove: function(event) {
        // console.log(event)
        if (this.flag !== 0) {
          return;
        }
        let currentX = event.touches[0].clientX;
        let currentY = event.touches[0].clientY;
        let tx = currentX - this.lastX;
        let ty = currentY - this.lastY;
        this.mindex = -1;
        //左右方向滑动
        if (Math.abs(tx) > Math.abs(ty)&&Math.abs(ty)<10) {
          if(tx>30){
             console.log('left')
             this.current+1 > 1 && this.toPrev()
             this.flag = 2;
          }else if(tx<-30){
             console.log('right')
             this.flag = 1;
             this.current+1 < this.total && this.toNext()
             //  this.getList();  //调用列表的方法
          }
        }

        //将当前坐标进行保存以进行下一次计算
        this.lastX = currentX;
        this.lastY = currentY;
      },
      handletouchstart: function(event) {
        // console.log(event)
        this.lastX = event.touches[0].clientX;
        this.lastY = event.touches[0].clientY;
      },
      handletouchend: function(event) {
        this.flag = 0;
      },
    }
  }
</script>

<style lang="scss">
  .resolve {
    min-height: 100%;
    background-color: $bg_color;
 .scrollheight {
      max-height: calc(100vh - var(--status-bar-height) - 20vh);
    }
    .blue {
      color: $global-color;
    }

    .icon-lunwentimu {
      font-size: px2vw(40);
      margin-right:px2vw(10);
    }

    .fixed {
 @include fixed
    }

    .footer {
      // position: fixed;
      // bottom: 0;
      // left: 0;
      // width: 100%;
      padding: px2vw(32);

      .prev {
        color: #00A2F7;
        margin-right: px2vw(10);
        background: #F5F6FA;
        border: 1px solid #00A2F7;
      }

      .btn {
        box-shadow: none;
      }

      .submit {
        background-color: #F55555;
      }
    }
    
    .question {
      background-color: #ffffff;
      min-height:px2vh(850) ;
      font-size: px2vw(28);
      margin: px2vw(32);
    
      .stem {
        padding: px2vw(16);
        font-size: px2vw(30);
      }
    }
   
  }
</style>
